<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el与data的两种写法</title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			data与el的2种写法
			1.el有2种写法
					(1).new Vue时候配置el属性。
					(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
			2.data有2种写法
					(1).对象式
					(2).函数式
					如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
			3.一个重要的原则:
					由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。 
		    -->
		<div id="root">
			<h1>{{name}}</h1>
		</div>
		<script>
			//配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
			Vue.config.productionTip = false;
			// el的两种写法
			// const vm = new Vue({
			// 	//el第一种写法
			// 	//el: '#root',
			// 	data: {
			// 		name: '读书点点'
			// 	},
			// 	methods: {

			// 	}
			// });
			/*
			 利用el配置项和div容器进行了关联，现在把el注释掉，那么这个vm现在就没和div进行关联，那么模               板就没有解析了
			 */
			//输出vm实例对象
			//console.log(vm);
			//$mount指定容器
			//el第二种写法
			//vm.$mount('#root');

			//======================================================================
			//data的两种写法
			//data第一种写法 对象的形式
			// const vm = new Vue({
			// 	el: '#root',
			// 	data: {
			// 		name: '读书点点'
			// 	}
			// });

			//data第二种写法 函数的形式
			const vm = new Vue({
				el: '#root',
				//该函数必须有一个返回对象  这个函数是Vue管理的
				data: function() {
					//此处的this是Vue实例对象
					console.log('此处的this:', this);
					return {
						name: '读书点点'
					}
				}
			});
		</script>
	</body>
</html>